<template>
  <div class="edit-user-info">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="nickname"
            name="昵称"
            label="昵称："
            :rules="[{ required: true, message: '昵称2-15汉字，且不包含除_和-的特殊字符。' }]"
        />
        <van-field
            v-model="signature"
            name="signature"
            rows="2"
            autosize
            label="介绍："
            type="textarea"
            maxlength="300"
            show-word-limit
        />
        <van-field name="gender" label="性别：">
          <template #input>
            <van-radio-group v-model="gender" direction="horizontal">
              <van-radio :name="0">保密</van-radio>
              <van-radio :name="1">男</van-radio>
              <van-radio :name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-model="birthday"
            is-link
            readonly
            name="birthday"
            label="生日"
            placeholder="点击选择生日"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-datetime-picker
              type="date"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm"
              @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
            v-model="areaValue"
            is-link
            readonly
            name="area"
            label="地区"
            placeholder="点击选择省市"
            @click="showArea = true"
        />
        <van-popup v-model:show="showArea" position="bottom">
          <van-area
              :area-list="areaList"
              @confirm="onConfirm"
              :columns-num="2"
              @cancel="showArea = false"
          />
        </van-popup>
      </van-cell-group>
      <div style="margin: 16px;" class="flex items-center justify-around">
        <YuButton padding="5px 20px">
          保存
        </YuButton>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import YuButton from '@/components/YuButton/index.vue'
import {reactive, toRefs, watchEffect} from "vue";

import {toCode} from "@/utils/code/index";
import {areaList} from '@vant/area-data';
import moment from "moment";
import {userUpdate} from "@/api/updateInfo/index";
import {Toast} from "vant";

const store = useStore()
const data = reactive({
  nickname: '', // 用户名
  signature: '', // 个性签名
  gender: 0, // 性别
  birthday: '0', // 生日
  province: 0, // 省份
  city: 0 // 城市
})


const {
  nickname,
  signature,
  gender,
  birthday
} = toRefs(data)

const actionsData = reactive({
  showArea: false, // 是否显示地区弹窗
  showPicker: false, // 是否展示时间弹窗
  areaValue: '', // 地区已经转换为字符串
  minDate: new Date(1990, 0, 1), // 时间选择器开始时间
  maxDate: new Date(2022, 12, 1), // 时间选择器结束时间
})

const {
  showPicker,
  maxDate,
  minDate,
  areaValue,
  showArea
} = toRefs(actionsData)

// 点击确定当前生日
const confirm = (value) => {
  data.birthday = moment(value).format('YYYY-MM-DD')
  actionsData.showPicker = false
  // console.log(value)
}

// 选中地区时触发
const onConfirm = (areaValues) => {
  console.log(areaValues)
  actionsData.showArea = false;
  // 设置当前选中的身份code
  data.province = areaValues[0].code
  // 设置当前选中的市code
  data.city = areaValues[1].code
  //
  actionsData.areaValue = areaValues
      .filter((item) => !!item)
      .map((item) => item.name)
      .join('/');
};

// 监听用户信息是否存在，如果存在就渲染
watchEffect(() => {
  if (store.userInfo) {
    data.nickname = store.userInfo.nickname
    data.signature = store.userInfo.signature
    data.gender = store.userInfo.gender
    data.birthday = moment(store.userInfo.birthday).format('YYYY-MM-DD')
    data.province = store.userInfo.province
    data.city = store.userInfo.city
    actionsData.areaValue = toCode(store.userInfo.province) + '/' + toCode(store.userInfo.city)
    console.log(store.userInfo)
  }
})

// 点击提交按钮显示
const onSubmit = () => {
  let formData = {...data}
  // 将生日转为时间戳
  formData.birthday = moment(data.birthday).valueOf()
// 修改用户信息 gender=0&signature=测试签名&city=440300&nickname=binary&birthday=1525918298004&province=440000

  userUpdate(formData).then(res => {
    if (Number(res.code) === 200) {
      Toast('更新更成功');
    }
  })
}

</script>

<style scoped lang="scss">

.van-form {
  max-width: 350px;
}

:deep(.van-cell-group) {
  .van-cell {
    background-color: v-bind('store.theme.bgColor') !important;

    .van-cell__title {
      color: v-bind('store.theme.textColor') !important;
    }

    .van-cell__value {
      color: v-bind('store.theme.titleTextColor') !important;
    }

    .van-radio__icon--checked {
      :before {
        color: v-bind('store.theme.textColor');
      }

      .van-icon {
        background-color: v-bind('store.theme.secondaryBgColor');
        border-color: v-bind('store.theme.secondaryBgColor');
      }
    }
  }
}

:deep(.van-popup) {
  width: 320px;
  height: 320px;
  position: absolute;
  top: 20rem;
  left: 0;
  right: 42rem;
  bottom: 0;
  margin: 0 auto;
}
</style>
